<!--
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生管理系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            background-color: #f5f5f5;
        }
        .container {
            display: flex;
            height: 100vh;
        }
        .sidebar {
            width: 220px;
            background-color: #001529;
            color: #fff;
            overflow-y: auto;
        }
        .logo {
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            font-weight: bold;
            border-bottom: 1px solid #002140;
        }
        .menu {
            padding: 10px 0;
        }
        .menu-item {
            padding: 12px 20px;
            cursor: pointer;
            transition: all 0.3s;
        }
        .menu-item:hover {
            background-color: #1890ff;
        }
        .menu-item.active {
            background-color: #1890ff;
        }
        .submenu {
            padding-left: 20px;
            display: none;
        }
        .submenu.show {
            display: block;
        }
        .main-content {
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        .header {
            height: 60px;
            background-color: #fff;
            box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
            display: flex;
            align-items: center;
            padding: 0 20px;
        }
        .content {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
        }
        iframe {
            width: 100%;
            height: 100%;
            border: none;
            background-color: #fff;
        }
        .loading {
            padding: 20px;
            text-align: center;
            color: #999;
        }
        .error-message {
            padding: 20px;
            color: #f5222d;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="container">
    &lt;!&ndash; 侧边栏菜单 &ndash;&gt;
    <div class="sidebar">
        <div class="logo">学生管理系统</div>
        <div class="menu" id="menuContainer">
            <div class="loading">菜单加载中...</div>
        </div>
    </div>

    &lt;!&ndash; 主内容区 &ndash;&gt;
    <div class="main-content">
        <div class="header">
            <h3>欢迎使用学生管理系统</h3>
        </div>
        <div class="content">
            <iframe id="contentFrame" src=""></iframe>
        </div>
    </div>
</div>

<script>
    // 动态获取菜单数据
    async function fetchMenuData() {
        try {
            const response = await fetch('http://localhost:8080/sysMenu/getAllMenu', {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json',
                    // 如果需要认证，可以添加token
                    // 'Authorization': 'Bearer ' + localStorage.getItem('token')
                },
                credentials: 'include' // 如果需要携带cookie
            });

            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }

            return await response.json();
        } catch (error) {
            console.error('获取菜单数据失败:', error);
            throw error;
        }
    }

    // 生成菜单
    async function renderMenu() {
        const menuContainer = document.getElementById('menuContainer');

        try {
            // 获取菜单数据
            const menuData = await fetchMenuData();

            // 清空容器
            menuContainer.innerHTML = '';

            // 检查数据是否有效
            if (!menuData || typeof menuData !== 'object') {
                throw new Error('菜单数据格式不正确');
            }

            // 渲染顶级菜单
            const topLevelMenus = menuData["0"] || [];
            if (topLevelMenus.length === 0) {
                menuContainer.innerHTML = '<div class="error-message">没有可用的菜单数据</div>';
                return;
            }

            topLevelMenus.forEach(topMenu => {
                // 创建顶级菜单项
                const topMenuItem = document.createElement('div');
                topMenuItem.className = 'menu-item';
                topMenuItem.textContent = topMenu.menuName;
                topMenuItem.dataset.menuId = topMenu.menuId;

                // 检查是否有子菜单
                const subMenus = menuData[topMenu.menuId];
                if (subMenus && subMenus.length > 0) {
                    // 添加点击事件展开/收起子菜单
                    topMenuItem.addEventListener('click', function() {
                        const submenu = this.nextElementSibling;
                        submenu.classList.toggle('show');
                    });

                    // 创建子菜单容器
                    const submenuContainer = document.createElement('div');
                    submenuContainer.className = 'submenu';

                    // 渲染子菜单
                    subMenus.forEach(subMenu => {
                        const subMenuItem = document.createElement('div');
                        subMenuItem.className = 'menu-item';
                        subMenuItem.textContent = subMenu.menuName;
                        subMenuItem.dataset.menuId = subMenu.menuId;

                        // 如果有menuUrl，添加点击事件加载内容
                        if (subMenu.menuUrl) {
                            subMenuItem.addEventListener('click', function() {
                                // 移除所有active类
                                document.querySelectorAll('.menu-item').forEach(item => {
                                    item.classList.remove('active');
                                });
                                // 添加active类到当前项
                                this.classList.add('active');

                                // 加载内容
                                loadContent(subMenu.menuUrl);
                            });
                        }

                        // 检查是否有三级菜单
                        const thirdLevelMenus = menuData[subMenu.menuId];
                        if (thirdLevelMenus && thirdLevelMenus.length > 0) {
                            // 添加点击事件展开/收起三级菜单
                            subMenuItem.addEventListener('click', function(e) {
                                // 阻止事件冒泡，避免触发父级菜单的点击事件
                                e.stopPropagation();

                                const submenu = this.nextElementSibling;
                                submenu.classList.toggle('show');
                            });

                            // 创建三级菜单容器
                            const thirdMenuContainer = document.createElement('div');
                            thirdMenuContainer.className = 'submenu';

                            // 渲染三级菜单
                            thirdLevelMenus.forEach(thirdMenu => {
                                const thirdMenuItem = document.createElement('div');
                                thirdMenuItem.className = 'menu-item';
                                thirdMenuItem.textContent = thirdMenu.menuName;
                                thirdMenuItem.dataset.menuId = thirdMenu.menuId;

                                if (thirdMenu.menuUrl) {
                                    thirdMenuItem.addEventListener('click', function() {
                                        // 移除所有active类
                                        document.querySelectorAll('.menu-item').forEach(item => {
                                            item.classList.remove('active');
                                        });
                                        // 添加active类到当前项
                                        this.classList.add('active');

                                        // 加载内容
                                        loadContent(thirdMenu.menuUrl);
                                    });
                                }

                                thirdMenuContainer.appendChild(thirdMenuItem);
                            });

                            submenuContainer.appendChild(subMenuItem);
                            submenuContainer.appendChild(thirdMenuContainer);
                        } else {
                            submenuContainer.appendChild(subMenuItem);
                        }
                    });

                    menuContainer.appendChild(topMenuItem);
                    menuContainer.appendChild(submenuContainer);
                } else {
                    // 没有子菜单，直接添加点击事件
                    if (topMenu.menuUrl) {
                        topMenuItem.addEventListener('click', function() {
                            // 移除所有active类
                            document.querySelectorAll('.menu-item').forEach(item => {
                                item.classList.remove('active');
                            });
                            // 添加active类到当前项
                            this.classList.add('active');

                            // 加载内容
                            loadContent(topMenu.menuUrl);
                        });
                    }
                    menuContainer.appendChild(topMenuItem);
                }
            });

            // 默认展开第一个菜单
            const firstTopMenu = document.querySelector(`.menu-item[data-menu-id="${topLevelMenus[0].menuId}"]`);
            if (firstTopMenu) {
                const submenu = firstTopMenu.nextElementSibling;
                if (submenu && submenu.classList.contains('submenu')) {
                    submenu.classList.add('show');
                }

                // 默认加载第一个有URL的子菜单
                const subMenus = menuData[topLevelMenus[0].menuId];
                if (subMenus && subMenus.length > 0) {
                    const firstValidSubMenu = subMenus.find(menu => menu.menuUrl);
                    if (firstValidSubMenu) {
                        const firstSubMenuItem = document.querySelector(`.menu-item[data-menu-id="${firstValidSubMenu.menuId}"]`);
                        if (firstSubMenuItem) {
                            firstSubMenuItem.classList.add('active');
                            loadContent(firstValidSubMenu.menuUrl);
                        }
                    }
                }
            }
        } catch (error) {
            console.error('渲染菜单失败:', error);
            menuContainer.innerHTML = `
                <div class="error-message">
                    菜单加载失败: ${error.message}<br>
                    <button onclick="location.reload()" style="margin-top: 10px; padding: 5px 10px; cursor: pointer;">
                        点击重试
                    </button>
                </div>
            `;
        }
    }

    // 加载内容到iframe
    function loadContent(url) {
        const contentFrame = document.getElementById('contentFrame');
        if (url && url.trim() !== '') {
            contentFrame.src = url;
        } else {
            contentFrame.src = 'about:blank';
        }
    }

    // 页面加载完成后初始化菜单
    document.addEventListener('DOMContentLoaded', function() {
        renderMenu();
    });
</script>
</body>
</html>-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生管理系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            background-color: #f5f5f5;
        }
        .container {
            display: flex;
            height: 100vh;
        }
        .sidebar {
            width: 220px;
            background-color: #001529;
            color: #fff;
            overflow-y: auto;
        }
        .logo {
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            font-weight: bold;
            border-bottom: 1px solid #002140;
        }
        .back-btn {
            padding: 12px 20px;
            cursor: pointer;
            transition: all 0.3s;
            border-bottom: 1px solid #002140;
            display: flex;
            align-items: center;
        }
        .back-btn:hover {
            background-color: #1890ff;
        }
        .back-btn i {
            margin-right: 8px;
        }
        .menu {
            padding: 10px 0;
        }
        .menu-item {
            padding: 12px 20px;
            cursor: pointer;
            transition: all 0.3s;
        }
        .menu-item:hover {
            background-color: #1890ff;
        }
        .menu-item.active {
            background-color: #1890ff;
        }
        .submenu {
            padding-left: 20px;
            display: none;
        }
        .submenu.show {
            display: block;
        }
        .main-content {
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        .header {
            height: 60px;
            background-color: #fff;
            box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
            display: flex;
            align-items: center;
            padding: 0 20px;
        }
        .content {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
        }
        iframe {
            width: 100%;
            height: 100%;
            border: none;
            background-color: #fff;
        }
        .loading {
            padding: 20px;
            text-align: center;
            color: #999;
        }
        .error-message {
            padding: 20px;
            color: #f5222d;
            text-align: center;
        }
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>
<body>
<div class="container">
    <!-- 侧边栏菜单 -->
    <div class="sidebar">
        <div class="logo">学生管理系统</div>
        <div class="back-btn" onclick="window.location.href='index.html'">
            <i class="fas fa-arrow-left"></i>返回首页
        </div>
        <div class="menu" id="menuContainer">
            <div class="loading">菜单加载中...</div>
        </div>
    </div>

    <!-- 主内容区 -->
    <div class="main-content">
        <div class="header">
            <h3>欢迎使用学生管理系统</h3>
        </div>
        <div class="content">
            <iframe id="contentFrame" src=""></iframe>
        </div>
    </div>
</div>

<script>
    // 动态获取菜单数据
    async function fetchMenuData() {
        try {
            const response = await fetch('http://localhost:8080/sysMenu/getAllMenu', {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json',
                    // 如果需要认证，可以添加token
                    // 'Authorization': 'Bearer ' + localStorage.getItem('token')
                },
                credentials: 'include' // 如果需要携带cookie
            });

            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }

            return await response.json();
        } catch (error) {
            console.error('获取菜单数据失败:', error);
            throw error;
        }
    }

    // 生成菜单
    async function renderMenu() {
        const menuContainer = document.getElementById('menuContainer');

        try {
            // 获取菜单数据
            const menuData = await fetchMenuData();

            // 清空容器
            menuContainer.innerHTML = '';

            // 检查数据是否有效
            if (!menuData || typeof menuData !== 'object') {
                throw new Error('菜单数据格式不正确');
            }

            // 渲染顶级菜单
            const topLevelMenus = menuData["0"] || [];
            if (topLevelMenus.length === 0) {
                menuContainer.innerHTML = '<div class="error-message">没有可用的菜单数据</div>';
                return;
            }

            topLevelMenus.forEach(topMenu => {
                // 创建顶级菜单项
                const topMenuItem = document.createElement('div');
                topMenuItem.className = 'menu-item';
                topMenuItem.textContent = topMenu.menuName;
                topMenuItem.dataset.menuId = topMenu.menuId;

                // 检查是否有子菜单
                const subMenus = menuData[topMenu.menuId];
                if (subMenus && subMenus.length > 0) {
                    // 添加点击事件展开/收起子菜单
                    topMenuItem.addEventListener('click', function() {
                        const submenu = this.nextElementSibling;
                        submenu.classList.toggle('show');
                    });

                    // 创建子菜单容器
                    const submenuContainer = document.createElement('div');
                    submenuContainer.className = 'submenu';

                    // 渲染子菜单
                    subMenus.forEach(subMenu => {
                        const subMenuItem = document.createElement('div');
                        subMenuItem.className = 'menu-item';
                        subMenuItem.textContent = subMenu.menuName;
                        subMenuItem.dataset.menuId = subMenu.menuId;

                        // 如果有menuUrl，添加点击事件加载内容
                        if (subMenu.menuUrl) {
                            subMenuItem.addEventListener('click', function() {
                                // 移除所有active类
                                document.querySelectorAll('.menu-item').forEach(item => {
                                    item.classList.remove('active');
                                });
                                // 添加active类到当前项
                                this.classList.add('active');

                                // 加载内容
                                loadContent(subMenu.menuUrl);
                            });
                        }

                        // 检查是否有三级菜单
                        const thirdLevelMenus = menuData[subMenu.menuId];
                        if (thirdLevelMenus && thirdLevelMenus.length > 0) {
                            // 添加点击事件展开/收起三级菜单
                            subMenuItem.addEventListener('click', function(e) {
                                // 阻止事件冒泡，避免触发父级菜单的点击事件
                                e.stopPropagation();

                                const submenu = this.nextElementSibling;
                                submenu.classList.toggle('show');
                            });

                            // 创建三级菜单容器
                            const thirdMenuContainer = document.createElement('div');
                            thirdMenuContainer.className = 'submenu';

                            // 渲染三级菜单
                            thirdLevelMenus.forEach(thirdMenu => {
                                const thirdMenuItem = document.createElement('div');
                                thirdMenuItem.className = 'menu-item';
                                thirdMenuItem.textContent = thirdMenu.menuName;
                                thirdMenuItem.dataset.menuId = thirdMenu.menuId;

                                if (thirdMenu.menuUrl) {
                                    thirdMenuItem.addEventListener('click', function() {
                                        // 移除所有active类
                                        document.querySelectorAll('.menu-item').forEach(item => {
                                            item.classList.remove('active');
                                        });
                                        // 添加active类到当前项
                                        this.classList.add('active');

                                        // 加载内容
                                        loadContent(thirdMenu.menuUrl);
                                    });
                                }

                                thirdMenuContainer.appendChild(thirdMenuItem);
                            });

                            submenuContainer.appendChild(subMenuItem);
                            submenuContainer.appendChild(thirdMenuContainer);
                        } else {
                            submenuContainer.appendChild(subMenuItem);
                        }
                    });

                    menuContainer.appendChild(topMenuItem);
                    menuContainer.appendChild(submenuContainer);
                } else {
                    // 没有子菜单，直接添加点击事件
                    if (topMenu.menuUrl) {
                        topMenuItem.addEventListener('click', function() {
                            // 移除所有active类
                            document.querySelectorAll('.menu-item').forEach(item => {
                                item.classList.remove('active');
                            });
                            // 添加active类到当前项
                            this.classList.add('active');

                            // 加载内容
                            loadContent(topMenu.menuUrl);
                        });
                    }
                    menuContainer.appendChild(topMenuItem);
                }
            });

            // 默认展开第一个菜单
            const firstTopMenu = document.querySelector(`.menu-item[data-menu-id="${topLevelMenus[0].menuId}"]`);
            if (firstTopMenu) {
                const submenu = firstTopMenu.nextElementSibling;
                if (submenu && submenu.classList.contains('submenu')) {
                    submenu.classList.add('show');
                }

                // 默认加载第一个有URL的子菜单
                const subMenus = menuData[topLevelMenus[0].menuId];
                if (subMenus && subMenus.length > 0) {
                    const firstValidSubMenu = subMenus.find(menu => menu.menuUrl);
                    if (firstValidSubMenu) {
                        const firstSubMenuItem = document.querySelector(`.menu-item[data-menu-id="${firstValidSubMenu.menuId}"]`);
                        if (firstSubMenuItem) {
                            firstSubMenuItem.classList.add('active');
                            loadContent(firstValidSubMenu.menuUrl);
                        }
                    }
                }
            }
        } catch (error) {
            console.error('渲染菜单失败:', error);
            menuContainer.innerHTML = `
                <div class="error-message">
                    菜单加载失败: ${error.message}<br>
                    <button onclick="location.reload()" style="margin-top: 10px; padding: 5px 10px; cursor: pointer;">
                        点击重试
                    </button>
                </div>
            `;
        }
    }

    // 加载内容到iframe
    function loadContent(url) {
        const contentFrame = document.getElementById('contentFrame');
        if (url && url.trim() !== '') {
            contentFrame.src = url;
        } else {
            contentFrame.src = 'about:blank';
        }
    }

    // 页面加载完成后初始化菜单
    document.addEventListener('DOMContentLoaded', function() {
        renderMenu();
    });
</script>
</body>
</html>